<template>
  <div>
    <div class="zz"></div>
    <div class="myForm">
      <!--绑定data字段   正则 -->
      <el-form :model="myform" :rules="rules">
        <el-form-item label="用户" prop="name">
          <el-input v-model="myform.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="myform.pwd" class="int"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="fndebounce"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <img src="../assets/bg.jpg" alt="" class="bg" />
  </div>
</template>
<script>
import instance from "@/api/index.js";
import debounce from "@/plucin/debounce.js";
export default {
  name: "Login",
  data() {
    return {
      myform: {
        name: "请输入用户名",
        pwd: "请输入密码",
      },
      rules: {
        name: [
          {
            message: "用户名是admin",
            trigger: "blur",
            pattern: /admin/,
          },
          {
            required: true,
            message: "不能为空",
          },
        ],
        pwd: [
          {
            message: "验证没有通过",
            trigger: "blur", //什么时候触发校验规则
            valldator: (rule, value, cb) => {
              //自定义校验
              console.log(rule);
              console.log(value);
              console.log(cb);
              let reg = /^(123456)/;
              let a = reg.test(value);
              if (a) {
                return cb();
              }
              //   return cb(new Error()); //返回的执行cb()表示通过
            },
          },
        ],
      },
    };
  },
  created() {
    this.fnajax = debounce(this.submitForm);
  },
  methods: {
    fndebounce() {
      //防抖封装
      this.fnajax();
    },
    async submitForm() {
      let name = this.myform.name;
      let pwd = this.myform.pwd;
      console.log(name);
      console.log(pwd);
      let { data } = await instance.get("/users", { params: { name, pwd } });
      if (data.length > 0) {
        localStorage.setItem("token", "111");
        this.$router.push({ name: "Home" });
        this.$message("登陆成功");
      }
    },
  },
};
</script>
<style scoped>
.myForm {
  width: 500px;
  margin: 0 auto;
  position: absolute;
  z-index: 99;
  left: 35%;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100vw;
  height: 100%;
}
.zz {
  width: 500px;
  height: 244px;
  position: absolute;
  left: 34%;
  background: #f2f3f4;
  padding: 20px;
  opacity: 0.6;
  z-index: 88;
}
</style>